<template>
  <div class="yonghu">
    		<!-- 面包屑导航区 -->
		<el-breadcrumb separator-class="el-icon-arrow-right" >
		<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		<el-breadcrumb-item>用户管理</el-breadcrumb-item>
		<el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>
    
    <!-- 卡片视图区 -->
    <el-card >  
      <!-- 搜索与添加区 -->
      <el-row  :gutter="20">
          <el-col :span="8">
            <el-input placeholder="请输入用户名" v-model="queryInfo.name" clearable> 
            <el-button slot="append" icon="el-icon-search" @click="chaxun(queryInfo.name)"  ></el-button>
            </el-input>
          </el-col>
          
          <el-col :span="4">
            <el-button type="primary "  @click="dialogVisible=true ">添加用户</el-button>
          </el-col>
      </el-row>
      <!-- 表格区域 -->
      <el-table :data="userlist" border stripe>
        <el-table-column align="center" type="index" ></el-table-column>
        <el-table-column align="center" label="用户名" prop="name"></el-table-column>
        <el-table-column  align="center" label="密码" prop="password" :formatter="password"  ></el-table-column> 
        <el-table-column  align="center" label="手机号" prop="phone" ></el-table-column> 
        <el-table-column align="center" label="兴趣 " prop="intrest" ></el-table-column> 

        <el-table-column align="center" label="操作 " >
          <!-- 通过scope拿到这一行的数据 -->
          <template slot-scope="scope">  
            <!-- 修改按钮 -->
            <el-tooltip class="item" effect="dark" content="编辑" placement="top" :enterable="false">
              <el-button type="primary" icon="el-icon-edit" circle  @click="showdialog(scope.row._id)"></el-button>
            </el-tooltip>
            <!-- 删除按钮 -->
            <el-tooltip class="item" effect="dark" content="删除" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" circle  @click="remove(scope.row._id)"></el-button>
            </el-tooltip>
          
          </template>
        </el-table-column> 
        

      </el-table>
    </el-card>
    <!-- 添加用户对话框 -->
      <el-dialog   title="添加用户"   :visible.sync="dialogVisible"  width="50%" @close="close" >
        <!-- 内容主体区域 -->
        <el-form :model="addform" :rules="addformRules" ref="addformRef" label-width="70px">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="addform.name" ></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input v-model="addform.password"></el-input>
          </el-form-item>

          <el-form-item label="手机号" prop="phone">
            <el-input v-model="addform.phone"></el-input>
          </el-form-item>

          <el-form-item label="兴趣" prop="intrest">
             <el-input v-model="addform.intrest"></el-input>
          </el-form-item>

        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="adduser"  >确 定</el-button>
        </span>
      </el-dialog>
    <!-- 修改用户对话框 --> 
    <el-dialog   title="修改用户"   :visible.sync="editdialog"  width="50%" @close="editclose" >
      <!-- 内容主体区域   ref是表单的引用  rules是验证规则-->
      <el-form :model="editform" :rules="editformRules" ref="editformRef" label-width="70px">
        <el-form-item label="用户名" prop="name">
        <el-input v-model="editform.name"  ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
        <el-input v-model="editform.password"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
        <el-input v-model="editform.phone"></el-input>
        </el-form-item>
        <el-form-item label="兴趣" prop="intrest">
        <el-input v-model="editform.intrest"></el-input>
        </el-form-item>

      </el-form>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialog=false">取 消</el-button>
        <el-button type="primary" @click="edituserinfo " >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除用户操作 -->

  </div>
  
  
</template>

<script>
export default {
  data () {
    return {
      queryInfo:{
        _id:'',
        name:'',
        password:'',
        phone:'',
        intrest:'',
      },
      userlist:[],
      
      dialogVisible: false,
      addform:{
        name:"",password:"",phone:"",intrest:""
      },
      // 添加表单的规则
      addformRules:{
        name: [ {required: true, message: "请输入姓名", trigger:'blur'}],
        intrest: [ {required: true, message: "请输入兴趣", trigger:'blur'}],
        password: [ {required: true, message: "请输入密码", trigger:'blur'}],
        phone: [ {required: true, message: "请输入手机号", trigger:'blur'}]
      },
      // 修改
      editdialog: false,
      //查询到的用户信息
      editform:{name:"",password:"",phone:"",intrest:""},
      //验证规则
      editformRules:{
        name: [ {required: true, message: "请输入姓名", trigger:'blur'}],
        intrest: [ {required: true, message: "请输入兴趣", trigger:'blur'}],
        password: [ {required: true, message: "请输入密码", trigger:'blur'}],
        phone: [ {required: true, message: "请输入手机号", trigger:'blur'}]       
      }

    }
  },
  created() {
    this.getuserlist()
  },
  methods: {
   async getuserlist(){
      const result= await this.$http.get('/users/findall',{params: this.queryInfo});
      if(result.data.date.code!==200) {
        return this.$message.error('获取用户列表失败')
      }
      this.userlist=result.data.res
      console.log(result.data);//数据数组
      // console.log(result.data.date.code );//响应代码200
    },
    //监听表单关闭
    close(){
      this.$refs.addformRef.resetFields()
    },
    //点击按钮添加新用户
     adduser(){
       this.$refs.addformRef.validate(async valid=>{
         if(!valid)return
         const res=await this.$http.post("/users/create",this.addform)
        //  console.log(res)
        //  console.log(res.data.data.code)
        if(res.data.data.code!==200){
                this.$message({showClose: true,message:'添加失败' ,type:'error'});
            }else{
                this.$message({showClose: true,message:'添加成功', type:'success'});
                this.dialogVisible=false
                this.getuserlist()
              }
       })
     
    },
    // 修改用户
    async showdialog(id){
      this.editdialog=true
      const res= await this.$http.get('/users/findname?_id='+id)
      console.log(res.data.data)
      if(res.data.code!==200){
        return this.$message.error('查询用户信息失败了')
      }else{
        this.editform=res.data.data;
      }

    },
    //监听关闭
    editclose(){
      this.$refs.editformRef.resetFields()
    },
    //处理函数
    edituserinfo(){
      this.$refs.editformRef.validate(async valid=>{
        //console.log(valid)
        if(!valid) return
        //发起修改请求
        const res= await this.$http.put('/users/update?_id='+this.editform._id ,  {name:this.editform.name,password:this.editform.password,phone:this.editform.phone,intrest:this.editform.intrest})
      
      
      // 关闭对话框
      this.editdialog=false;
      //刷新数据列表
      this.getuserlist();
      //提示修改成功
      this.$message.success('更新用户成功')
      })
    },
    
    // 查询用户
    async  chaxun(nam){
      const res= await this.$http.get('/users/findname?name='+nam)
      console.log(res.data.data)
      this.userlist=res.data.data;
    },
    // 问题删除用户后不能自动刷新需要手动刷新
    //根据姓名删除用户
    remove(id) {
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.delete('/users/delete?_id='+id);
          
          this.$message({
            type: 'success',
            message: '删除成功! 刷新页面更新数据'
          });
          
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        this.getuserlist()
    }
  }
}
</script>

<style scoped>
.yonghu{
  height: 438px;
}
.el-breadcrumb{
  height: 30px;
}
.el-card{
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.el-table{
  margin-top: 15px;
}

</style>
